<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="用药量计算">
                <div class="li1">
                    <p class="p">稀释倍数(倍):</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <p class="p">兑水量(斤):</p>
                    <br/>
                    &nbsp;<input type="text" ref="x" id="a"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" ref="d" id="b"/>
                    <br/> 
                    <p>用药量&nbsp;&nbsp;&nbsp;{{ y1 }}</p>
                    <p></p>
                    
                    <button class="btn" @click="num" >计算</button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="兑水量计算  ">
                <div class="li1">
                    <p class="p">稀释倍数(倍):</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <p class="p">用药量(mL/g):</p>
                    <br/>
                    &nbsp;<input type="text" ref="x1" id="c"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" ref="y1" id="d"/>
                    <br/>
                    <p>兑水量&nbsp;&nbsp;&nbsp;{{ d1 }}</p>
                    <p></p>
                    
                    <button class="btn" @click="num2">计算</button>
                </div>
            </el-tab-pane>
            
        </el-tabs>
        <br/>
        <div class="img">
            <img src="@/assets/index-4.1.png" class="img-childen"/>
        </div>

        <div class="border">
            <div style="width:690px;height:360px;overflow:scroll;overflow-y:none;">
<table border="2px" >
   
  <tr>
      <td rowspan="2" style="width:70px" bgcolor="e3ddab">用药量(毫升或克)</td>
      <td colspan="13" bgcolor="#f8b5e4">总水量(斤)</td>
      
    </tr>
   <tr>
    <td bgcolor="#f8b5e4"></td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">30斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">60斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">80斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">90斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">100斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">150斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">200斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">500斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">1000斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">2000斤</td>
      <td width="90px" align="center" valign="center" bgcolor="#f8b5e4">5000斤</td>
    </tr>
    <tr>
      <td rowspan="18" bgcolor="#b1e5a3">稀释倍数</td>
      <td bgcolor="#b1e5a3">100倍</td>
      <td bgcolor="e3ddab">150.0</td>
      <td bgcolor="e3ddab">300.0</td>
      <td bgcolor="e3ddab">400.0</td>
      <td bgcolor="e3ddab">450.0</td>
      <td bgcolor="e3ddab">500.0</td>
      <td bgcolor="e3ddab">750.0</td>
      <td bgcolor="e3ddab">1000.0</td>
      <td bgcolor="e3ddab">2500.0</td>
      <td bgcolor="e3ddab">5000.0</td>
      <td bgcolor="e3ddab">10000.0</td>
      <td bgcolor="e3ddab">25000.0</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">200倍</td>
      <td bgcolor="#dfc691">75.0</td>
      <td bgcolor="#dfc691">150.0</td>
      <td bgcolor="#dfc691">200.0</td>
      <td bgcolor="#dfc691">225.0</td>
      <td bgcolor="#dfc691">250.0</td>
      <td bgcolor="#dfc691">375.0</td>
      <td bgcolor="#dfc691">500.0</td>
      <td bgcolor="#dfc691">1250.0</td>
      <td bgcolor="#dfc691">2500.0</td>
      <td bgcolor="#dfc691">5000.0</td>
      <td bgcolor="#dfc691">12500.0</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">300倍</td>
      <td bgcolor="e3ddab">50.0</td>
      <td bgcolor="e3ddab">100.0</td>
      <td bgcolor="e3ddab">133.3</td>
      <td bgcolor="e3ddab">150.0</td>
      <td bgcolor="e3ddab">166.7</td>
      <td bgcolor="e3ddab">250.0</td>
      <td bgcolor="e3ddab">333.3</td>
      <td bgcolor="e3ddab">833.3</td>
      <td bgcolor="e3ddab">1666.7</td>
      <td bgcolor="e3ddab">3333.3</td>
      <td bgcolor="e3ddab">8333.3</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">400倍</td>
      <td bgcolor="#dfc691">37.5</td>
      <td bgcolor="#dfc691">75.5</td>
      <td bgcolor="#dfc691">100.0</td>
      <td bgcolor="#dfc691">112.5</td>
      <td bgcolor="#dfc691">125.0</td>
      <td bgcolor="#dfc691">187.5</td>
      <td bgcolor="#dfc691">250.0</td>
      <td bgcolor="#dfc691">625.5</td>
      <td bgcolor="#dfc691">1250.0</td>
      <td bgcolor="#dfc691">2500.0</td>
      <td bgcolor="#dfc691">6250.0</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">500倍</td>
      <td bgcolor="e3ddab">30.0</td>
      <td bgcolor="e3ddab">60.0</td>
      <td bgcolor="e3ddab">80.0</td>
      <td bgcolor="e3ddab">90.0</td>
      <td bgcolor="e3ddab">100.0</td>
      <td bgcolor="e3ddab">150.0</td>
      <td bgcolor="e3ddab">200.0</td>
      <td bgcolor="e3ddab">500.0</td>
      <td bgcolor="e3ddab">1000.0</td>
      <td bgcolor="e3ddab">2000.0</td>
      <td bgcolor="e3ddab">5000.0</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">600倍</td>
      <td bgcolor="#dfc691">25.0</td>
      <td bgcolor="#dfc691">50.0</td>
      <td bgcolor="#dfc691">66.7</td>
      <td bgcolor="#dfc691">75.0</td>
      <td bgcolor="#dfc691">83.3</td>
      <td bgcolor="#dfc691">125.0</td>
      <td bgcolor="#dfc691">166.7</td>
      <td bgcolor="#dfc691">416.7</td>
      <td bgcolor="#dfc691">833.3</td>
      <td bgcolor="#dfc691">1666.7</td>
      <td bgcolor="#dfc691">4166.7</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">700倍</td>
      <td bgcolor="e3ddab">21.4</td>
      <td bgcolor="e3ddab">42.9</td>
      <td bgcolor="e3ddab">57.1</td>
      <td bgcolor="e3ddab">64.3</td>
      <td bgcolor="e3ddab">71.4</td>
      <td bgcolor="e3ddab">107.1</td>
      <td bgcolor="e3ddab">142.9</td>
      <td bgcolor="e3ddab">357.1</td>
      <td bgcolor="e3ddab">714.3</td>
      <td bgcolor="e3ddab">1428.6</td>
      <td bgcolor="e3ddab">3571.4</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">800倍</td>
      <td bgcolor="#dfc691">18.8</td>
      <td bgcolor="#dfc691">37.5</td>
      <td bgcolor="#dfc691">50.0</td>
      <td bgcolor="#dfc691">56.3</td>
      <td bgcolor="#dfc691">62.5</td>
      <td bgcolor="#dfc691">93.8</td>
      <td bgcolor="#dfc691">125.0</td>
      <td bgcolor="#dfc691">312.5</td>
      <td bgcolor="#dfc691">625.0</td>
      <td bgcolor="#dfc691">1250.0</td>
      <td bgcolor="#dfc691">3125.0</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">900倍</td>
      <td bgcolor="e3ddab">16.7</td>
      <td bgcolor="e3ddab">33.3</td>
      <td bgcolor="e3ddab"> 44.4</td>
      <td bgcolor="e3ddab">50.0</td>
      <td bgcolor="e3ddab">55.6</td>
      <td bgcolor="e3ddab">83.3</td>
      <td bgcolor="e3ddab">111.1</td>
      <td bgcolor="e3ddab">277.8</td>
      <td bgcolor="e3ddab">555.6</td>
      <td bgcolor="e3ddab">1111.1</td>
      <td bgcolor="e3ddab">2777.8</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">1000倍</td>
      <td bgcolor="#dfc691">15.0</td>
      <td bgcolor="#dfc691">30.0</td>
      <td bgcolor="#dfc691">40.0</td>
      <td bgcolor="#dfc691">45.0</td>
      <td bgcolor="#dfc691">50.0</td>
      <td bgcolor="#dfc691">75.0</td>
      <td bgcolor="#dfc691">100.0</td>
      <td bgcolor="#dfc691">250.0</td>
      <td bgcolor="#dfc691">500.0</td>
      <td bgcolor="#dfc691">1000.0</td>
      <td bgcolor="#dfc691">2500.0</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">1500倍数</td>
      <td bgcolor="e3ddab">10.0</td>
      <td bgcolor="e3ddab">20.0</td>
      <td bgcolor="e3ddab">26.7</td>
      <td bgcolor="e3ddab">30.0</td>
      <td bgcolor="e3ddab">33.3</td>
      <td bgcolor="e3ddab">50.0</td>
      <td bgcolor="e3ddab">66.7</td>
      <td bgcolor="e3ddab">166.7</td>
      <td bgcolor="e3ddab">333.3</td>
      <td bgcolor="e3ddab">666.7</td>
      <td bgcolor="e3ddab">1666.7</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">2000倍</td>
      <td bgcolor="#dfc691">7.5</td>
      <td bgcolor="#dfc691">15.0</td>
      <td bgcolor="#dfc691">20.0</td>
      <td bgcolor="#dfc691">22.5</td>
      <td bgcolor="#dfc691">25.0</td>
      <td bgcolor="#dfc691">37.5</td>
      <td bgcolor="#dfc691">50.0</td>
      <td bgcolor="#dfc691">125.0</td>
      <td bgcolor="#dfc691">250.0</td>
      <td bgcolor="#dfc691">500.0</td>
      <td bgcolor="#dfc691">1250.0</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">2500倍</td>
      <td bgcolor="e3ddab">6.0</td>
      <td bgcolor="e3ddab">12.0</td>
      <td bgcolor="e3ddab">16.0</td>
      <td bgcolor="e3ddab">18.0</td>
      <td bgcolor="e3ddab">20.0</td>
      <td bgcolor="e3ddab">30.0</td>
      <td bgcolor="e3ddab">40.0</td>
      <td bgcolor="e3ddab">100.0</td>
      <td bgcolor="e3ddab">200.0</td>
      <td bgcolor="e3ddab">400.0</td>
      <td bgcolor="e3ddab">1000.0</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">3000倍</td>
      <td bgcolor="#dfc691">5.0</td>
      <td bgcolor="#dfc691">10.0</td>
      <td bgcolor="#dfc691">13.3</td>
      <td bgcolor="#dfc691">15.0</td>
      <td bgcolor="#dfc691">16.7</td>
      <td bgcolor="#dfc691">25.0</td>
      <td bgcolor="#dfc691">33.3</td>
      <td bgcolor="#dfc691">83.3</td>
      <td bgcolor="#dfc691">166.7</td>
      <td bgcolor="#dfc691">333.3</td>
      <td bgcolor="#dfc691">833.3</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">3500倍</td>
      <td bgcolor="e3ddab">4.3</td>
      <td bgcolor="e3ddab">8.6</td>
      <td bgcolor="e3ddab">11.4</td>
      <td bgcolor="e3ddab">12.9</td>
      <td bgcolor="e3ddab">14.3</td>
      <td bgcolor="e3ddab">21.4</td>
      <td bgcolor="e3ddab">28.6</td>
      <td bgcolor="e3ddab">71.4</td>
      <td bgcolor="e3ddab">142.9</td>
      <td bgcolor="e3ddab">285.7</td>
      <td bgcolor="e3ddab">714.3</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">4000倍</td>
      <td bgcolor="#dfc691">3.8</td>
      <td bgcolor="#dfc691">7.5</td>
      <td bgcolor="#dfc691">10.0</td>
      <td bgcolor="#dfc691">11.3</td>
      <td bgcolor="#dfc691">12.5</td>
      <td bgcolor="#dfc691">18.8</td>
      <td bgcolor="#dfc691">25.0</td>
      <td bgcolor="#dfc691">62.5</td>
      <td bgcolor="#dfc691">125.0</td>
      <td bgcolor="#dfc691"> 250.0</td>
      <td bgcolor="#dfc691">625.0</td>
    </tr>
    <tr>
      
      <td bgcolor="b1e5a3">4500倍</td>
      <td bgcolor="e3ddab">3.3</td>
      <td bgcolor="e3ddab">6.7</td>
      <td bgcolor="e3ddab">8.9</td>
      <td bgcolor="e3ddab">10.0</td>
      <td bgcolor="e3ddab">11.1</td>
      <td bgcolor="e3ddab">16.7</td>
      <td bgcolor="e3ddab">22.2</td>
      <td bgcolor="e3ddab">55.6</td>
      <td bgcolor="e3ddab">111.1</td>
      <td bgcolor="e3ddab">222.2</td>
      <td bgcolor="e3ddab">555.6</td>
    </tr>
    <tr>
      
      <td bgcolor="#b1e5a3">5000倍</td>
      <td bgcolor="#dfc691">3.0</td>
      <td bgcolor="#dfc691">6.0</td>
      <td bgcolor="#dfc691">8.0</td>
      <td bgcolor="#dfc691">9.0</td>
      <td bgcolor="#dfc691">10.0</td>
      <td bgcolor="#dfc691">15.0</td>
      <td bgcolor="#dfc691">20.0</td>
      <td bgcolor="#dfc691">50.0</td>
      <td bgcolor="#dfc691">100.0</td>
      <td bgcolor="#dfc691"   >200.0</td>
      <td bgcolor="#dfc691">500.0</td>
    </tr>
  </table>
</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
        // activeName: 'first',
        y1:'',
        d1:''
    }
    },
    methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    num(){
      var a=document.getElementById('a')
      var b=document.getElementById('b')
      if(a.value=="" || b.value==""){
        alert('输入不能为空')
        return false;

      }else{
        this.y1=((this.$refs.d.value/2)*1000)/this.$refs.x.value
        console.log(this.$refs.x.value)
      }
    },
    num2(){
      var c=document.getElementById('c')
      var d=document.getElementById('d')
      if(c.value=="" || d.value==""){
        alert('输入不能为空')
        return false;
      }else{
        this.d1=(this.$refs.y1.value*this.$refs.x1.value)/500

      }
    }
    },
  
};
</script>
<style scoped>
    .li1{
        width:800px;
        height:200px;
        background-color: rgb(234, 234, 234);
        margin-top: -20px;
    }
    .p{
        display: inline-block;
    }
    input{
        width:250px;
        height:25px;

    }
    .btn{
        width:80px;
        height:30px;
        background-color: rgb(54, 142, 83);
        margin-left: 300px;
    }
    .img{
        width:170px;
        height:360px;
        background-color: chartreuse;
        float:left;
    }
    .img-childen{
        width:170px;
        height:360px;
    }
    .border{
        float:left;
        margin-left: 30px;
    }
</style>